<template>
    <div>
      <h1>View Nine</h1>
      <h1>这个页面主要是使用pinia管理计数相关数据</h1>
      <h1>拿到的store里的数据是：{{ countStore.sum }}</h1>
      <h1>拿到的store里的数据通过解构：{{ sum }}</h1>
      <h1>拿到的通过getter处理过的数据:{{ bigSum }}</h1>
      <select v-model.number="n">
        <option value="1">1</option>
        <option value="-1">-1</option>
        <option value="2">2</option>
        <option value="-2">-2</option>
      </select>
      <button @click="add">加</button>
      <button @click="multiply">乘</button>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  import { storeToRefs } from 'pinia'

  // 引用普通写法pinia
  // import { useCountStore } from '@/store/count'

  // 引用组合式写法pinia
  import { useCountStore } from '@/store/countComposite'

  //hooks的思想，直接调用use，得到东西
  //countStore是什么：是一个reactive对象，里面放的是state（自己定义的）和action
  const countStore = useCountStore()

  // 以下两种方式都可以拿到state中的数据
  // console.log('@@@',countStore.sum)
  // console.log('@@@',countStore.$state.sum)

  // 只会包裹数据，不会包裹方法
  const { sum,bigSum } = storeToRefs(countStore)
  
  const n = ref(1)

  function add() {
    // 第一种修改数据的方式
    // countStore.sum += n.value

    // 第二种修改数据的方式
    countStore.$patch({
      sum: countStore.sum + n.value
    })
  }
  // 第三种修改数据的方式,调用action里定义的方法
  function multiply() {
    countStore.increment(n.value)
  }

  // 监听store里的数据变化,可以自己增加操作，比如存到localStorage里
  countStore.$subscribe((mutation, state) => {
    console.log('countStore里面的数据发生了变化',mutation, state)
    // localStorage.setItem('talkList',JSON.stringify(state.sum))
  })
  </script>
  
  <style scoped>
  select,button {
    color: green;
    border: none;
    padding: 0.5rem 1rem;
    margin: 2rem;
    cursor: pointer;
    border-radius: 4px;
  }
select{
  padding: 30px; /* 增加内边距使选择框变大 */
  font-size: 18px; /* 增大字体大小 */
  min-width: 200px; /* 增加最小宽度 */
  height: 50px;
}
  </style>